<template>
	<view>
		<view class="group">
			<view class="flex-col">
				<text class="text_1">设计图纸</text>
				<view class="flex-col group_2">
					<shop-upload :maxCount="9" :fileList="fileList" @del="delectPic" @success='success'></shop-upload>

					<text class="text_2">注：展示最终确认的施工图</text>
					<view class="flex-col items-center justify-center button" @click="save"><text
							class="text_3">保存</text></view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				fileList: [],
				projectId: '',
				overviewConstructionUrl: ''
			};
		},
		onLoad() {
			this.getid()
			
		},
		computed:{
			
		},
		methods: {
			delectPic(index) {
				this.fileList.splice(index, 1);
			},
			success(file) {
				this.fileList.push({
					url: file.url
				})

			},
			save() {

				if (this.fileList.length == 0) {
					this.$u.toast('请上传设计图纸');
					return;
				}

				let arr = [];
				this.fileList.map(item => {
					arr.push(item.url)
				})

				let overviewConstructionUrl = arr.join(",");

				this.$http('luser.editpic', {
					projectId: this.projectId,
					overviewConstructionUrl: overviewConstructionUrl
				}).then(r => {
					if (r.code == 200) {


						uni.navigateBack({
							success: function() {
								
								uni.$emit('update');
					
							}
						});
					}
				});
			},
			getid() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {
						this.projectId = r.data.project.projectId;
						this.getList()
					}
				});
			},
			getList() {
				this.$http('OverviewL.getSGTUrl', {
					projectId: this.projectId
				}).then(res => {
					if (res.code == 200) {
						let pic = res.data.overviewConstructionUrl.overviewConstructionUrl.split(',');
						let file = [];
						pic.map(item => {
							file.push({
								url: item
							});
						})
						this.fileList = file
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.grid-item {
		border-radius: 16rpx;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.page {
		background-color: #ffffffff;
		width: 100%;

		height: 100vh;
	}

	.img {
		width: 100%;
		height: 100%;
	}

	.group {
		padding: 30rpx 22rpx 64rpx 32rpx;
		/* flex: 1 1 auto; */

	}

	.button {
		margin-top: 20rpx;

		height: 90rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.text_1 {
		align-self: flex-start;
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.group_2 {
		margin-top: 34rpx;
		padding-top: 10rpx;
		position: relative;
	}

	.text_2 {
		margin-top: 29rpx;
		align-self: flex-start;
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_3 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.grid {
		margin-right: 10rpx;

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 36rpx;
		column-gap: 24rpx;
	}

	.image_5 {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 192rpx;
		top: 0;
	}

	.image_6 {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 0rpx;
		top: 0;
	}

	.image_7 {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.image_8 {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		left: 192rpx;
		bottom: 192rpx;
	}

	.grid-item_1 {
		width: 214rpx;
		height: 214rpx;
	}
</style>
